<template>
	<view class="contant">
		<view v-for="(item,index) in lostAndFound" :key="index" class="lostAndFound" @click="lostAndFoundDetail">
			<!-- 个人信息部分 -->
			<view class="PIM">
				<u--image :src="item.touxiang" width="100rpx" height="100rpx" shape="circle"></u--image>
				<u--text :text="item.name" margin="30rpx" size="35rpx"></u--text>
				<view class="date">{{item.date}}</view>
			</view>
			<!-- 活动内容 -->
			<view class="activityContent">
				<u--text :lines="1" :text="item.activity"></u--text>
				<u--image :src="item.lostAndFoundImg" width="200rpx" height="200rpx" :fade="true" duration="450"></u--image>
			</view>
			<!-- 状态 -->
			<view class="behavior">
				<u-icon :name="icon" size="60rpx" label="点赞" @click="dianzan"></u-icon>
				<u-icon name="chat" size="60rpx" label="评论"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//失物招领数据
				lostAndFound: [{
					touxiang:"../../static/OIP-C.jpg",
					name:"敲代码",
					date: "2021-11-29",
					activity: "发布了失物招领：打扫10栋208",
					lostAndFoundImg: "../../static/OIP-C.jpg",
				},{
					touxiang:"../../static/OIP-C.jpg",
					name:"敲代码",
					date: "2021-11-29",
					activity: "发布了失物招领：打扫10栋208",
					lostAndFoundImg: "../../static/OIP-C.jpg",
				},{
					touxiang:"../../static/OIP-C.jpg",
					name:"敲代码",
					date: "2021-11-29",
					activity: "发布了失物招领：打扫10栋208",
					lostAndFoundImg: "../../static/OIP-C.jpg",
				},{
					touxiang:"../../static/OIP-C.jpg",
					name:"敲代码",
					date: "2021-11-29",
					activity: "发布了失物招领：打扫10栋208",
					lostAndFoundImg: "../../static/OIP-C.jpg",
				},{
					touxiang:"../../static/OIP-C.jpg",
					name:"敲代码",
					date: "2021-11-29",
					activity: "发布了失物招领：打扫10栋208",
					lostAndFoundImg: "../../static/OIP-C.jpg",
				}],
				//点赞图标
				icon:"thumb-up"
			}
		},
		methods: {
			//点赞效果的实现
			dianzan(){
				if(this.icon === "thumb-up-fill"){
					this.icon = "thumb-up"
				} else {
					this.icon = "thumb-up-fill"
				}
			},
			lostAndFoundDetail(){
				uni.navigateTo({
					url:"./lostAndFoundDetail"
				})
			}
		}
	}
</script>

<style lang="scss">
	.contant{
		padding: 40rpx 25rpx 20rpx 20rpx;
		font-family: 'KaiTi','Times New Roman', Times, serif;
	}
	.PIM{
		display: flex;
		text-align: center;
		// flex-direction: row;
		// text-align: flex-end;
		height: 100rpx;
		padding-left: 16rpx;
		margin-top: 10rpx;
	}
	//动态里的时间
	.date{
		margin: 10rpx 42rpx 0rpx 0rpx;
		font-size: 30rpx;
	}
	//动态里的点赞，评论，点击参加部分
	.behavior{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 18rpx;
	}
	//动态里的活动部分
	.activityContent{
		margin-top: 18rpx;
	}
	//动态
	.lostAndFound{
		box-shadow: 0px 0px 8px #d5d5d6;
		height: 450rpx;
		padding: 20rpx;
		margin-bottom: 10rpx;
		border-radius: 16rpx;
	}
</style>
